<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品信息展示</title>
    <style>
        .product-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px;
        }

        .product-container {
            display: flex;
            flex-wrap: wrap;
            /* 自动换行关键属性 */
            gap: 20px;
            padding: 20px;
        }

        .product-card {
            flex: 1 1 250px;  /* 调整flex-basis为250px */
            min-width: 250px;
            max-width: 300px;  /* 新增最大宽度限制 */
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .product-image {
            width: 100%;
            max-width: 280px;
            height: auto;
            border-radius: 4px;
        }

        .product-specs {
            list-style: none;
            padding-left: 0;
        }

        .product-price {
            color: #e74c3c;
            font-weight: bold;
            font-size: 1.2em;
        }
    </style>
</head>

<body>
    <!-- 修改为单个容器包裹所有产品 -->
    <div class="product-container">
        <!-- 单个产品模板 -->
        <!-- <div class="product-card">
            <img src="/蛏肉.jpg" alt="蛏肉" class="product-image">
            <h2 class="product-name">蛏肉</h2>
            <ul class="product-specs">
                <li>1件25盘</li>
                <li>280克/盘</li>
            </ul>
            <div class="product-price">单价：￥8.5/盘</div>
        </div> -->
    </div>
</body>
<script>
    // 产品数据数组
    const products = [
        {
            image: "/蛏肉.jpg",
            name: "蛏肉",
            specs: ["1件25盘", "280克/盘"],
            price: "8.5"
        },
        {
            image: "/蛏肉.jpg",
            name: "蛏肉",
            specs: ["1件25盘", "280克/盘"],
            price: "8.5"
        },

    ];

    // 创建产品卡片函数
    function createProductCard(product) {
        const card = document.createElement('div');
        card.className = 'product-card';
        // 构建卡片内容
        card.innerHTML = `
            <img src="${product.image}" alt="${product.name}" class="product-image">
            <h2 class="product-name">${product.name}</h2>
            <ul class="product-specs">
                ${product.specs.map(spec => `<li>${spec}</li>`).join('')}
            </ul>
            <div class="product-price">单价：￥${product.price}/盘</div>
        `;
        return card;
    }
    // 渲染所有产品
    const container = document.querySelector('.product-container');
    products.forEach(product => {
        container.appendChild(createProductCard(product));
    });
</script>
</html>